<template>
  <div class="login">
    <video
      muted="muted"
      src="../../assets/media/bg.mp4"
      loop="loop"
      autoplay="autoplay"
      class="video"
    ></video>
    <div class="login-content">
      <h1 class="title">{{ pageInfo.title }}</h1>
      <!--使用动态组件 is控制组件动态切换 -->
      <component :is="pageInfo.component"></component>
      <div class="toggle">
        <svg class="icon" aria-hidden="true">
          <use :xlink:href="icon"></use>
        </svg>
        <b @click="handleToggle">{{ pageInfo.toggleDes }}</b>
      </div>
    </div>
  </div>
</template>

<script setup>
import commonLogin from "../../components/login/commonLogin.vue";
import smsLogin from "../../components/login/smsLogin.vue";
import { ref, watchEffect, markRaw, computed } from "vue";
//声明一个页面数据
let pageInfo = ref({
  title: "千峰管理系统",
  loginType: "common",
  toggleDes: "点击切换手机登入",
  component: markRaw(commonLogin),
});
//标记是否显示CommonLogin组件
let isCommonLogin = ref(true);
let handleToggle = () => {
  isCommonLogin.value = !isCommonLogin.value;
  // console.log(isCommonLogin);
};

watchEffect(() => {
  //显示CommonLogin组件
  if (isCommonLogin.value) {
    pageInfo.value = {
      title: "千峰管理系统",
      loginType: "common",
      toggleDes: "点击切换手机登入",
      component: markRaw(commonLogin),
    };
  } else {
    //显示smsLogin组件
    pageInfo.value = {
      title: "短信登入",
      loginType: "sms",
      toggleDes: "点击切换用户密码登入",
      component: markRaw(smsLogin),
    };
  }
});
let icon = computed(() => {
  return isCommonLogin.value ? "#icon-iphone" : "#icon-icon-test";
});
</script>
<style lang="less" scoped>
.video {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.login-content {
  position: fixed;
  right: 10%;
  top: 10%;
  border-radius: 5px;
  width: 400px;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 100px 0 50px 0;
  text-align: center;
  color: #fff;
  .title {
    margin: 0 0 60px 0;
    text-align: center;
  }
  .toggle {
    text-align: center;
    text-decoration: underline;
  }
  :deep(.icon) {
    width: 2em;
    height: 2em;
    vertical-align: middle;
    cursor: pointer;
  }
  b {
    cursor: pointer;
    margin-left: 5px;
  }
}
</style>
